﻿@{
    Layout = "~/Views/Shared/_WxLayout.cshtml";
    ViewBag.Title = "每日一练";
    Exam exam = ViewBag.exam;
    List<Quest> list = ViewBag.list;
}
<div style="padding:1em;">
    <h1>@ViewBag.Title</h1>
    <p>
        @exam.Name
    </p>
</div>
@foreach (var quest in list)
{
    <div name="quest" answer="@quest.Answer">
        <div class="weui-cells__title">@quest.Title</div>
        <div class="weui-cells">
            <a class="weui-cell  weui-cell_access" href="javascript:;" onclick="answer(this)">
                <div class="weui-cell__bd">
                    <p>@quest.OptionA</p>
                </div>
                <div class="weui-cell__ft">A</div>
            </a>
            <a class="weui-cell  weui-cell_access" href="javascript:;" onclick="answer(this)">
                <div class="weui-cell__bd">
                    <p>@quest.OptionB</p>
                </div>
                <div class="weui-cell__ft">B</div>
            </a>
            <a class="weui-cell  weui-cell_access" href="javascript:;" onclick="answer(this)">
                <div class="weui-cell__bd">
                    <p>@quest.OptionC</p>
                </div>
                <div class="weui-cell__ft">C</div>
            </a>
            <a class="weui-cell  weui-cell_access" href="javascript:;" onclick="answer(this)">
                <div class="weui-cell__bd">
                    <p>@quest.OptionD</p>
                </div>
                <div class="weui-cell__ft">D</div>
            </a>
        </div>
        <div style="display:none;">
            <h3>正确答案： @quest.Answer</h3>
            <p>@quest.Analysis</p>
            <h3>@quest.Point</h3>
        </div>
    </div>
}
<div style="position: fixed; bottom: 0; width:100%;">
    <div class="weui-flex">
        <div class="weui-flex__item" style="text-align:left;"><button style="padding:0.5em 1em;" onclick="prev();">上一题</button></div>
        <div class="weui-flex__item" style="text-align:center;"><button style="padding:0.5em 1em;" onclick="tolist()">返回列表</button></div>
        <div class="weui-flex__item" style="text-align:right;"><button style="padding:0.5em 1em;" onclick="next()">下一题</button></div>
    </div>
</div>

@*<div style="position: fixed; bottom: 0; margin:auto;">
        <button style="padding: 0.5em 1em;" onclick="tolist()">返回列表</button>
    </div>
    <div style="position: fixed; bottom: 0; right: 0;">
        <button style="padding: 0.5em 1em;" onclick="next()">下一题</button>
    </div>*@

@section script{
    <script>
        $(document).ready(function () {
            $("[name=quest]").hide().eq(0).attr("curr", 1).show();
        });

        function answer(obj) {
            let op = $(obj);
            let an = op.parent().parent().attr("answer");
            let a1 = op.find(".weui-cell__ft").text();
            if (a1 == an) {
                op.css("background-color", "#07c160");
                layer.open({
                    type: 2
                    , time: 1
                    , shadeClose: false
                    , content: '回答正确，下一题'
                    , end: function () {
                        next();
                    }
                });
            } else {
                op.css("background-color", "#fa5151");
            }
            op.parent().next().show();
        }

        function prev() {
            let curr = $("[name=quest][curr=1]");
            let last = curr.prev("[name=quest]");
            if (last.length == 0) {
                layer.open({
                    time: 2
                    , shade: false
                    , style: 'background-color: #666;color:#fff; border:none;'
                    , content: '没有上一题了'
                });
                return;
            }
            curr.removeAttr("curr").hide();
            last.attr("curr", 1).show();
        }
        function next() {
            let curr = $("[name=quest][curr=1]");
            let next = curr.next("[name=quest]");
            if (next.length == 0) {
                layer.open({
                    time: 2
                    , shade: false
                    , style: 'background-color: #666;color:#fff; border:none;'
                    , content: '没有下一题了'
                });
                return;
            }
            curr.removeAttr("curr").hide();
            next.attr("curr", 1).show();
        }

        function tolist() {
            let url = "@Url.Action("DailyExam")";
            window.location.href = url;
        }
    </script>
}